﻿@model BBICMS.Application.ViewModels.Front.ProductDetailVM

@{
    ViewBag.Title = Model.ProductNo;
}

@section header{
    @*<meta name="keywords" content="@Model.Product.ProductNo,@Model.Product.ProductName" />
    <meta name="description" content="@Model.Product.Summary" />*@
<link href="~/Scripts/lib/jquery/plugins/bxslider/dist/jquery.bxslider.min.css" rel="stylesheet" />

}


@section featured{
    <div class="sitepath">
        <div class="container">
        
            <ol class="breadcrumb">
                <li><a href="/">@Menu.Home</a></li>
                <li>&gt;</li>
                <li><a href="@Url.Action("Index", "Products")">@Menu.Product</a></li>
                <li>&gt;</li>
                <li class="active">@Model.Title</li>
            </ol>
                </div>
        
    </div>
}


    <div class="container page-productdetail m-b-30">
        <ul class="bxslider">
            @foreach (var photo in Model.ProductPhotos)
            {
                <li><img src="@photo.ImageUrl" /></li>
            }
        </ul>
        <h1 class="title">
            @Model.Title @Model.ProductNo
        </h1>
        <div class="row">
            <div class="col-md-4">
                <aside class="thumb">
                    <img src="@Model.Thumbnail" alt="@Model.ProductNo" />
                </aside>

            
            </div>
            <div class="col-md-8">
                <div class="productdes">
                    <h2>Configuration Details  </h2>
                    <ul class="list-unstyled">
                        <li>
                            Product：<span>@Model.Title</span>
                        </li>
                        <li>
                            Model：<span>@Model.ProductNo</span>
                        </li>
                        <li>
                            Stalls：<span>@Model.Stalls</span>
                        </li>
                        <li>
                            Voltage：<span>@Model.Voltage</span>
                        </li>
                        <li>
                            Tank Capacity：<span>@Model.TankCapacity</span>
                        </li>
                        <li>
                            Water Pressure：<span>@Model.WaterPressure</span>
                        </li>


                    </ul>
                    <article class="content">
                       @Html.Raw(Model.Body)
                    </article>
                </div>
            </div>
        </div>
    </div>


@section scripts {
    <!-- Swiper JS -->
<script src="~/Scripts/lib/jquery/plugins/bxslider/dist/jquery.bxslider.min.js"></script>

<!-- Initialize Swiper -->
<script>



        $(function () {
            $(".menu>ul>li:nth-of-type(3) a").addClass("active");

            $('.bxslider').bxSlider({ "pager": false,"auto":true});
        })
        
    </script>

}